<template>
  <view class="message-card" :hover-class="'card-hover'">
    <view class="card-header">
      <view class="card-title">{{ studentInfo.student }}</view>
      <view class="card-subtitle">课程: {{ studentInfo.subject }}</view>
    </view>

    <view class="card-content">
      <view class="content-item">
        <text class="item-label">联系人:</text>
        <text class="item-value">{{ studentInfo.guardian }}</text>
      </view>

      <view class="content-item">
        <text class="item-label">联系电话:</text>
        <text class="item-value">{{ studentInfo.guardianPhone }}</text>
      </view>
      <view class="content-item">
        <text class="item-label">课时:</text>
        <text class="item-value">
          <text class="remaining-class">{{ studentInfo.remainingClassNum }}</text>
          /
          {{ studentInfo.classNum }}
        </text>
      </view>
    </view>
    <view class="card-footer">
      <button type="primary" size="mini" @click="handleAttendance(1)">到课</button>
      <button type="default" class="classReview" size="mini" @click="handleAttendance(4)">
        课堂点评
      </button>
      <button type="warn" size="mini" @click="handleAttendance(2)">请假</button>
      <button type="default" class="warning" size="mini" @click="handleAttendance(3)">缺勤</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import type { StudentInfoItem } from '@/types/studentInfo'
const props = defineProps<{
  studentInfo: StudentInfoItem
}>()
const emit = defineEmits(['openRecordPopup'])

const handleAttendance = (status: number) => {
  emit('openRecordPopup', status, props.studentInfo.id)
}
</script>
<style scoped lang="scss">
.message-card {
  background-color: $student-card-bg;
  border-radius: $student-border-radius;
  box-shadow: $student-shadow;
  margin: 20rpx;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-hover {
  transform: translateY(-3rpx);
  box-shadow: $student-hover-shadow;
}

.card-header {
  padding: 30rpx 30rpx 20rpx;
  background-color: #f8fafc;
  border-bottom: 1rpx solid $student-border-color;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: $student-text-primary;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
}

.card-subtitle {
  font-size: 28rpx;
  color: $student-text-secondary;
}

.card-content {
  padding: 25rpx 30rpx;
}

.content-item {
  display: flex;
  margin-bottom: 24rpx;
  align-items: center;
}

.content-item:last-child {
  margin-bottom: 0;
}

.item-label {
  width: 180rpx;
  font-size: 28rpx;
  color: $student-text-tertiary;
}

.item-value {
  flex: 1;
  font-size: 28rpx;
  color: $student-text-primary;
  line-height: 1.5;
}

.remaining-class {
  color: $student-primary-color;
  font-weight: bold;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx 30rpx;
  background-color: #f8fafc;
  border-top: 1rpx solid $student-border-color;
}

.card-footer button {
  margin-left: 16rpx;
  border-radius: 24rpx;
  padding: 0 32rpx;
  font-size: 26rpx;
  height: 72rpx;
  line-height: 72rpx;
  transition: all 0.3s;
}

.card-footer button:first-child {
  margin-left: 0;
}

.warning {
  background-color: $student-warning-color !important;
  color: #fff !important;
}

.classReview {
  background-color: $student-primary-color !important;
  color: #fff !important;
}
/* 按钮悬停效果 */
.card-footer button:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
</style>
